<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液分配</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>
<body>

<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <el-form-item label="输血申请单号">
                <el-input v-model="pagination.transfusionNumber" placeholder="请输入输血申请单号" clearable></el-input>
            </el-form-item>

            <el-form-item label="病人ID">
                <el-input v-model="pagination.patientId" placeholder="请输病人ID" clearable></el-input>
            </el-form-item>

            <el-form-item label="血液编号">
                <el-input v-model="pagination.bloodNumber" placeholder="请输入血液编号" clearable></el-input>
            </el-form-item>

            <el-form-item label="ABO血型">
                <el-select v-model="pagination.aboBloodType" clearable placeholder="请选择ABO血型">
                    <el-option v-for="item in aboBloodTypeList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="RH血型">
                <el-select v-model="pagination.rhBloodType" clearable placeholder="请选择RH血型">
                    <el-option v-for="item in rhBloodTypeList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血液成分">
                <el-select v-model="pagination.bloodComponent" placeholder="请选择或输入血液成分" clearable filterable @blur="selectBlur"
                @clear = "selectClearComponent" @change="selectChangeComponent">
                    <el-option v-for="(item,index) in bloodComponentList" :key="item.code" :label="item.composition" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="血量">
                <el-select v-model="pagination.bloodCount" clearable placeholder="请选择血量">
                    <el-option v-for="item in transfusionVolumeList" :key="item.code" :label="item.size" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="状态" prop="state">
                <el-select  v-model="pagination.state" clearable placeholder="请选择或输入状态"  filterable @blur="selectBlur"
                @clear = "selectClearState" @change="selectChangeState">
                    <el-option v-for="(item, index) in dispenseStateList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getByQueryPage(1)">搜索</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="info" @click="getByQueryPage()">重置</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="danger" @click="batchDelete()">批量删除</el-button>
            </el-form-item>

            <el-table key="tab1" ref="transfusionTable"  :data="tableData" style="width: 100%" border
                        :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row fit>
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="transfusionNumber" label="输血申请单号"align="center"></el-table-column>
                    <el-table-column prop="patientId" label="病人ID" align="center"></el-table-column>
                    <el-table-column prop="bloodComponent" label="血液成分"  align="center">
                        <template slot-scope="scope">
                            {{ getBloodComponentName(scope.row.bloodComponent) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="aboBloodType" label="ABO血型"  align="center">
                        <template slot-scope="scope">
                            {{ getAboBloodName(scope.row.aboBloodType) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="rhBloodType" label="RH血型" align="center">
                        <template slot-scope="scope">
                            {{ getRhBloodName(scope.row.rhBloodType) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="bloodCount" label="血量" align="center">
                        <template slot-scope="scope">
                            {{ getBloodSizeName(scope.row.bloodCount) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="bloodNumber" label="分配血液编号" align="center"></el-table-column>
                    <el-table-column prop="state" label="状态" align="center">
                        <template slot-scope="scope">
                            {{ getDispenseStateName(scope.row.state) }}
                        </template>
                    </el-table-column>
                <!--相关操作-->
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button slot="reference" size="small" type="primary" align="left" :disabled="getDispenseStateName(scope.row.state)!='配血完成' || getDispenseStateName(scope.row.state)=='已发血'" @click="Dispense(scope.row)">发血</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[5,10,15]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>


    </template>
</div>


<script src="/js/vue.min.js"></script>
<script src = "/js/2.15.12/index.js"></script>
<link href = "/css/2.15.12/index.css" rel="stylesheet">
<script src="/plugins/axios-0.27.2/axios.min.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/httpVueLoader.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>(
    function () {
        new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    // 描述列表文字居中
                    rowCenter:{
                        "text-align":"center"
                    },
                    // 状态字典列表
                    dispenseStateList : '',

                    // abo血型
                    aboBloodTypeList : '',

                    // rh血型
                    rhBloodTypeList : '',

                    // 血液类型
                    bloodComponentList : '',

                    // 血袋位置类型
                    bloodLocationList : '',

                    // 输血量列表
                    transfusionVolumeList : '',

                    // 当前用户登录信息
                    user: {
                        "accountNonExpired": true,
                        "accountNonLocked": true,
                        "credentialsNonExpired": true,
                        "enable": false,
                        "enabled": false,
                        "jobnum": "tom",
                        "menuUrls": {
                            "menu": [{
                                "urls": [{
                                    "id": "11",
                                    "title": "11",
                                    "url": "/pages/error/403.html",
                                    "titleflag": "error"
                                }], "title": "testerror", "titleflag": "error"
                            }, {
                                "urls": [{
                                    "id": "22",
                                    "title": "5-5",
                                    "url": "/pages/error/505.html",
                                    "titleflag": "testerror"
                                }], "title": "testerror2", "titleflag": "testerror"
                            }]
                        },
                        "noLocked": false,
                        "personalization": {
                            "asideFold": false,
                            "mainTabsHeaderFixed": true,
                            "asideControlOpen": false,
                            "headerSkin": "colorful",
                            "headerFixed": false,
                            "skin": "brown",
                            "asideSkin": "dark",
                            "asideControlFixed": true
                        },
                        "username": "tom"
                    },

                    //分页相关信息
                    pagination: {
                        currentPage : 1, //当前页码
                        pageSize : 5, //每页显示记录数
                        total : 0, //总记录数
                        //查询条件
                        patientId : '',
                        bloodNumber : '',
                        transfusionNumber: '', //输血申请单号
                        aboBloodType: '',   //abo血型
                        rhBloodType: '',    //rh血型
                        bloodComponent: '', //血液成分
                        bloodCount: '', //血液规格
                        state:'', // 血液状态
                    },

                    //嵌套dialog表格状态
                    bloodInfoVisible : false,

                    //信件嵌套表格的状态
                    textTableVisble : false,

                    //表格信息
                    tableData: [],

                    //匹配表格信息
                    matchBlood: [],

                    // 输血申请单号索引
                    transfusionNumberIndex : '',

                    //信件表格信息
                    textTableData : [],

                    // 血液匹配信息分页
                    currentPageBlood: 1,
                    pagesizeBlood: 1,
                }
            },

            //自动触发写入的函数
            created() {
                this.getByQueryPage();
            },

            mounted(){
                this.getBloodSize();
                this.getBloodLocation();
                this.getDispenseState();
                this.getAboBloodType();
                this.getRhBloodType();
                this.getBloodComponent();
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            },

            methods: {
                // 血液匹配信息分页
                handleSizeChangeBlood: function (pagesizeBlood) {
                    this.pagesizeBlood = pagesizeBlood;
                },
                handleCurrentChangeBlood: function (currentPageBlood) {
                    this.currentPageBlood = currentPageBlood;
                },

                // 通知信息分页
                handleSizeChangeText: function (pagesizeText) {
                    this.pagesizeText = pagesizeText;
                },
                handleCurrentChangeText: function (currentPageText) {
                    this.currentPageText = currentPageText;
                },

                selectBlur(e){
                        if (e.target.value !== ''){
                            this.pagination.state = e.target.value;
                            this.$forceUpdate() //强制更新
                        }
                    },

                    // 清空状态
                    selectClearState(){
                        this.pagination.state = ''
                        this.$forceUpdate();
                    },

                    // 输入状态
                    selectChangeState(val){
                        this.pagination.state = val
                        this.$forceUpdate();
                    },

                    // 清空血液成分
                    selectClearComponent(){
                        this.pagination.bloodComponent = ''
                        this.$forceUpdate();
                    },

                    // 输入血液成分
                    selectChangeComponent(val){
                        this.pagination.bloodComponent = val
                        this.$forceUpdate();
                    },


                //批量删除
                batchDelete() {
                    if(JSON.parse(JSON.stringify(this.$refs.transfusionTable.selection)).length==0){
                        this.$notify({
                            title: '温馨提示：',
                            message: '您未选中数据，请重新操作！！！',
                            type: 'warning'
                        });
                        return;
                    }
                    let checkArr = JSON.parse(JSON.stringify(this.$refs.transfusionTable.selection));  // 存储了勾选到的数据
                    var ids=new Array()
                    for(var i=0;i<checkArr.length;i++){
                        ids[i]=checkArr[i].id;
                    }
                    console.log("打印所选编号")
                    console.log(ids)
                    // let data={ids:ids}
                    //批量删除
                    this.$confirm('确定删除这些数据吗, 是否继续?', '批量删除', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            url: '/transfusionApplicationInformation/batchDelete',
                            method: 'put',
                            dataType: 'json',
                            data:ids
                        }).then(res => {
                            if (res.data.code === '200') {
                                this.$notify({
                                    tile: '温馨提示',
                                    message: '批量删除成功！！！',
                                    type: 'success'
                                })
                                this.getByQueryPage(0);
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '删除出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '删除失败',
                            })
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                //分页查询
                getByQueryPage:function(flag){
                    if (flag != 1) {
                        this.pagination.transfusionNumber = '';
                        this.pagination.aboBloodType = '';
                        this.pagination.rhBloodType = '';
                        this.pagination.bloodComponent = '';
                        this.pagination.bloodCount = '';
                        this.pagination.state = '';
                        this.pagination.patientId = '';
                        this.pagination.bloodNumber = '';
                        this.pagination.currentPage = 1;
                    }
                    axios.get('/transfusionApplicationInformation/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                        {
                            params:{
                                transfusionNumber : this.pagination.transfusionNumber,
                                aboBloodType : this.pagination.aboBloodType,
                                rhBloodType : this.pagination.rhBloodType,
                                bloodComponent : this.pagination.bloodComponent,
                                bloodCount : this.pagination.bloodCount,
                                state : this.pagination.state,
                                patientId : this.pagination.patientId,
                                bloodNumber : this.pagination.bloodNumber,
                            }
                        }).then((res)=>{
                        if (res.data.code === '200') {
                            console.log(res.data.data)
                            this.pagination.pageSize = res.data.data.size;
                            this.pagination.currentPage = res.data.data.current;
                            this.pagination.total = res.data.data.total;
                            this.tableData = Object.values(res.data.data.records);
                        } else{
                            this.$message.success('查询失败');
                        }
                    });
                },

                // 分页查询 每页显示多少条数据
                handleSizeChange:function(pageSize){
                    this.pagination.pageSize = pageSize;
                    this.getByQueryPage(1);
                },

                //分页查询 切换页码
                handleCurrentChange:function(currentPage){
                    this.pagination.currentPage = currentPage;
                    //执行查询
                    this.getByQueryPage(1);
                },

                // 发血
                Dispense(row){
                    this.transfusionNumberIndex = row.transfusionNumber;
                    // 根据血液编号更改血液的状态就好了
                    console.log("发血模块测试输出：")
                    console.log(row.bloodNumber)
                    // 更改血液分配表信息状态
                    axios({
                        url : ' /transfusionApplicationInformation/normal/setStateByBloodNumber',
                        method : 'put',
                        data : JSON.stringify({
                            bloodId : row.bloodNumber,
                            state : '8', // 8代表已发血
                        }),
                        headers : {
                                    'Content-Type' : 'application/json;charset=UTF-8'
                                    }
                    }).then((res)=>{
                        if (res.data.code === '200'){
                            this.$notify({
                                title : '消息',
                                message : res.data.msg,
                                type : 'success'
                            })
                        }
                    })
                      // 更改血液信息表信息状态
                      axios({
                        url : ' /bloodInformation/normal/setBloodInfoState',
                        method : 'put',
                        data : JSON.stringify({
                            bloodId : row.bloodNumber,
                            state : '28', // 28代表待取血
                        }),
                        headers : {
                                        'Content-Type' : 'application/json;charset=UTF-8'
                                    }
                    }).then((res)=>{
                        if (res.data.code === '200'){
                            this.$notify({
                                title : '消息',
                                message : res.data.data,
                                type : 'success'
                            })
                        }else {
                            this.$notify({
                                title : '消息',
                                message : '未找到匹配血液信息',
                                type : 'warning'
                            })
                        }
                    })

                    // 更改整体输血表状态信息
                    axios({
                        url : ' /overall/normal/setOverallBloodState',
                        method : 'put',
                        data : JSON.stringify({
                            transfusionNumber : row.transfusionNumber,
                            state : '1', // 1代表待取血
                        }),
                        headers : {
                                        'Content-Type' : 'application/json;charset=UTF-8'
                                    }
                    }).then((res)=>{
                        if (res.data.code === '200'){
                            this.$notify({
                                title : '消息',
                                message : res.data.data,
                                type : 'success'
                            })
                        }else {
                            this.$notify({
                                title : '消息',
                                message : '未找到匹配血液信息',
                                type : 'warning'
                            })
                        }
                    })

                    // 根据患者Id找到患者身份证号
                    axios.get('/patient/normal/getIdcardById', {
                        params : {
                            Id : row.patientId
                        }
                    }).then((res)=>{
                        if (res.data.code === '200'){
                            var Idcard = res.data.data
                            // 增加一条取血记录
                            axios({
                                method : 'post',
                                url : '/bloodTake/normal/addRecord',
                                data : JSON.stringify({
                                    bloodId : row.bloodNumber,
                                    transfusionNumber : this.transfusionNumberIndex,
                                    transfusionType : '异体血',
                                    bloodComponent : row.bloodComponent,
                                    bloodType : this.getAboBloodName(row.aboBloodType) + this.getRhBloodName(row.rhBloodType),
                                    bloodCount : row.bloodCount,
                                    patientIdcard : Idcard,
                                    state : '28', // 28代表待取血
                                    isDeleted : 0 //0代表未删除 
                                }),
                                headers : {
                                    'Content-Type' : 'application/json;charset=UTF-8'
                                }
                            }).then((res)=>{
                                if (res.data.code === '200'){
                                    this.$notify({
                                        title : '消息',
                                        message : res.data.data,
                                        type : 'success'
                                    })
                                    //刷新页面
                                    this.getByQueryPage();
                                }
                            })
                        
                        // 根据血液编号获取血液信息
                        axios.get('/bloodInformation/normal/getBloodInfoByBloodId', {
                            params : {
                                bloodId : row.bloodNumber
                            }
                        }).then((res)=>{
                            if (res.data.code === '200'){
                                // 发送消息通知
                                var sendTime = this.getNowTime();
                                var text = '血液编号:'+  res.data.data.bloodId + '血装编号:' +  res.data.data.barcode + '血袋位置:' + this.getBloodLocationName(res.data.data.bloodLocation)
                                var state = '未读' // 0代表未读
                                var isDeleted = 0 // 0代表未被删除
                                axios({
                                    url : '/msgText/normal/addMsgText',
                                    method : 'post',
                                    data : JSON.stringify({
                                        sendTime : sendTime,
                                        doctorJobnum : this.user.jobnum,
                                        text : text,
                                        state : state,
                                        isDeleted : isDeleted,
                                    }),
                                    headers : {
                                        'Content-Type' : 'application/json;charset=UTF-8'
                                    }
                                }).then((res)=>{
                                    this.$notify({
                                        title : '成功',
                                        message : '取血消息发送成功',
                                        type : 'success',
                                    })
                                })
                            }
                        })
                        }
                    })
                },

                  // 获取血量字典
                  getBloodSize(){
                        axios.get('/bloodSize/normal/getName1')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.transfusionVolumeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                        },
                
                    // 将表格中bloodCount字段的code转换成size
                    getBloodSizeName(code){
                        for (var i = 0; i < this.transfusionVolumeList.length; i++) {
                            if (this.transfusionVolumeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.transfusionVolumeList[i].size;
                            }
                        }
                    },

                     // 将表格中bloodCount字段的size转换成code
                     getBloodSizeCode(name){
                        for (var i = 0; i < this.transfusionVolumeList.length; i++) {
                            if (this.transfusionVolumeList[i].size == name) { //dictValue，dictLabel保持和上面定义一致
                                return this.transfusionVolumeList[i].code;
                            }
                        }
                    },

                // 获取血液配血状态字典
                getDispenseState(){
                    axios.get('/bloodDispenseState/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.dispenseStateList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },



                
                
                // 将表格中aboBloodType字段的code转换成name
                getDispenseStateName(code){
                    for (var i = 0; i < this.dispenseStateList.length; i++) {
                        if (this.dispenseStateList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.dispenseStateList[i].name;
                        }
                    }
                },

                // 获取abo血型字典
                getAboBloodType(){
                    axios.get('/aboType/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.aboBloodTypeList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },

                // 将表格中aboBloodType字段的code转换成name
                getAboBloodName(code){
                    for (var i = 0; i < this.aboBloodTypeList.length; i++) {
                        if (this.aboBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.aboBloodTypeList[i].name;
                        }
                    }
                },

                 // 获取rh血型字典
                 getRhBloodType(){
                    axios.get('/rhType/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.rhBloodTypeList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                
                // 将表格中rhType字段的code转换成name
                getRhBloodName(code){
                    for (var i = 0; i < this.rhBloodTypeList.length; i++) {
                        if (this.rhBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.rhBloodTypeList[i].name;
                        }
                    }
                },

                // 获取血液成分字典
                getBloodComponent(){
                    axios.get('/bloodComposition/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.bloodComponentList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                
                // 将表格中bloodComponent字段的code转换成name
                getBloodComponentName(code){
                    for (var i = 0; i < this.bloodComponentList.length; i++) {
                        if (this.bloodComponentList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.bloodComponentList[i].composition;
                        }
                    }
                },

                // 将表格中的bloodComponent字段的name转换成code
                getBloodComponentCode(name){
                    for (var i = 0; i < this.bloodComponentList.length; i++) {
                        if (this.bloodComponentList[i].composition == name) { //dictValue，dictLabel保持和上面定义一致
                            return this.bloodComponentList[i].code;
                        }
                    }
                },

                
                    // 获取血液位置字典
                    getBloodLocation(){
                        axios.get('/bloodLocation/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodLocationList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },
                    // 将表格中bloodLocation字段的code转换成name
                    getBloodLocationName(code){
                        for (var i = 0; i < this.bloodLocationList.length; i++) {
                            if (this.bloodLocationList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodLocationList[i].location;
                            }
                        }
                    },

                // 获取当前时间
                getNowTime(){
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth()+1;
                    var day = date.getDate();
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();

                    var time = year + '-' + this.handleTimeStr(month) + '-' +
                    this.handleTimeStr(day) + ' ' + this.handleTimeStr(hour) + ':' + this.handleTimeStr(minute)
                    + ':' + this.handleTimeStr(second);
                    return time;
                },

                handleTimeStr(tStr){  // 解决 10:2:2 出现各位数字格式化为 10:02:02
                    if (tStr < 10){
                        return '0'+ tStr
                    }else {
                        return tStr
                    }
                },
            }
        });
    })()
</script>

</body>
</html>